<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="frostpad.css">
  </head>
  <body>

    <div id="i-container" class="c-container">
      <div class="c-instruction">click or drag on the pad.</div>
      <div id="i-xypad" class="c-xypad">
        <div class="c-up c-embossed">CLEAN</div>
        <div class="c-left c-embossed">LOW PITCH</div>
        <div class="c-right c-embossed">HIGH PITCH</div>
        <div class="c-down c-embossed">NOISY</div>
      </div>
      <div id="i-control">
        <div id="i-control-cover">
        </div>
        <div id="i-control-pad">
        </div>
      </div>
    </div>
    <div id="i-viz" class="c-viz">
      <canvas id="i-canvas"></canvas>
    </div>

    <!-- WAAX r12 pilot -->
    <script src="src/WAAX.js"></script>
    <script src="src/Fader.js"></script>
    <script src="src/Noise.js"></script>
    <script src="src/FilterBank.js"></script>
    <script src="src/ADSR.js"></script>
    <script src="src/Chorus.js"></script>
    <script src="src/Converb.js"></script>
    <script src="src/Spectrum.js"></script>

    <!-- test code -->
    <script>
      var n = WX.Noise();
      var fb = WX.FilterBank();
      var env = WX.ADSR();
      var cho = WX.Chorus();
      var verb = WX.Converb();
      var spec = WX.Spectrum();
      var mybuffers = WX.BufferMap({
        "plate": "data/960-LargePlate.wav"
      }, onBufferMapReady);

      function onBufferMapReady () {
        verb.setImpulseResponse(mybuffers.getBufferByName("plate"));
      }

      env.setADSR(0.25, 0.05, 0.75, 1.5);
      env.setParam('pMode', 'monophonic');
      verb.setParam('pMix', 0.25);


      WX.patch = n >> fb >> env >> cho >> verb >> WX.Dac;
      WX.patch = verb >> spec;


      var kWidth = 767, kHeight = 400;
      var div_xypad = document.getElementById('i-xypad');
      var cvs = document.getElementById('i-canvas');
      var ctx2d = cvs.getContext('2d');
      ctx2d.canvas.width = window.innerWidth;
      ctx2d.canvas.height = 600;

      spec.setContext2D(ctx2d);

      function getMousePosition(event) {
        var box = div_xypad.getBoundingClientRect();
        return {
          x: (event.clientX - box.left) / kWidth,
          y: (event.clientY - box.top) / kHeight
        };
      }

      function dragged(event) {
        var p = getMousePosition(event);
        fb.setParam('pSlope', p.x, 1, WX.now+0.08);
        fb.setParam('pWidth', p.y, 1, WX.now+0.08);
      }

      function released(event) {
        env.noteOff();
        window.removeEventListener('mousemove', dragged, false);
        window.removeEventListener('mouseup', released, false);
      }


      div_xypad.addEventListener('mousedown', function (event) {
        var p = getMousePosition(event);
        fb.setParam('pPitch', p.x * 48 + 24);
        var chord;
        if (p.y < 0.25) {
          chord = 'ionian';
        } else if (p.y < 0.5) {
          chord = 'lydian';
        } else if (p.y < 0.75) {
          chord = 'aeolian';
        } else {
          chord = 'mixolydian';
        }
        fb.setParam('pChord', chord);
        env.noteOn();

        window.addEventListener('mousemove', dragged, false);
        window.addEventListener('mouseup', released, false);
      }, false);

      function loop() {
        spec.draw("#ccc");
        requestAnimationFrame(loop);
      }
      loop();


    </script>

  </body>
</html>